<template>
	<view class="RankingList" :style="{'background': '#F7F8FA'}">
		<!-- 头部 -->
		<view :style="{'paddingTop':StatusBar + 'px'}" class="index_nav">
			<view class="index_nav_banner">
				<image src="../../static/RankingList/bg.png"> </image>
			</view>
			<view class="nav_head">
				<view class="header_back" @click="navigateBack()">
					<image src="../../static/RankingList/return.png"></image>
				</view>
				<view class="head_right">
					
				</view>
			</view>
		</view>
		
		<!-- 头部 -->
		<view :style="{'paddingTop':StatusBar + 'px', 'background': '#FFF', 'height': 'auto'}"  v-if="headerIf" class="index_nav index_nav_fxed">
			<view class="nav_head">
				<view class="header_back" @click="navigateBack()">
					<image src="../../static/RankingList/return.png"></image>
				</view>
				<view class="head_right">
					
				</view>
			</view>
		</view>
		
		<view class="rank_body">
			<view class="body_top">
				<view class="body_Ttext">
					昨日成交总量：2526
				</view>
				
				<view class="top_list">
					<view class="list_item">
						<view class="item_image">
							<image src="../../static/RankingList/top_2.png"></image>
						</view>
						<view class="item_title">永劫无间</view>
						<view class="item_orde">昨日成交订单</view>
						<view class="item_Number">686</view>
					</view>
					
					<view class="list_item">
						<view class="item_image">
							<image src="../../static/RankingList/top_1.png"></image>
						</view>
						<view class="item_title">永劫无间</view>
						<view class="item_orde">昨日成交订单</view>
						<view class="item_Number">786</view>
					</view>
					
					<view class="list_item">
						<view class="item_image">
							<image src="../../static/RankingList/top_3.png"></image>
						</view>
						<view class="item_title">永劫无间</view>
						<view class="item_orde">昨日成交订单</view>
						<view class="item_Number">386</view>
					</view>
				</view>
			</view>
			
			<view class="body_list">
				<view class="list_text">全部数据</view>
				<view class="list_rank">
					<view class="rank_top">
						<view class="top_name">排名</view>
						<view class="top_name">游戏名称</view>
						<view class="top_name">昨日成交订单</view>
					</view>
					<view class="rankbody">
						<view class="rank_bodys"  v-for="(item, index) in 18" @click="navigateTo('transaction')">
							<view class="bodys_solt">
								<view class="icon_1" v-if="index == 0"></view>
								<view class="icon_2" v-if="index == 1"></view>
								<view class="icon_3" v-if="index == 2"></view>
								<view v-if="index > 2">{{ index + 1}}</view>
							</view>
							<view class="bodys_title">
								<view class="title_image">
									<image src="../../static/logo.png"></image>
								</view>
								原神
							</view>
							<view class="bodys_orde">
								2266
								<view class="orde_image">
									<image src="../../static/RankingList/jian.png"> </image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				headerIf: false,
			}
		},
		onShow() {
		},
		onReady(){
		},
		onPageScroll(e) {
			this.headerIf = e.scrollTop > 15
		},
		methods: {
		}
	}
</script>

<style lang="less" scoped>
	* {
		margin: 0;
		padding: 0;
	}
	.RankingList {
		width: 750rpx;
		overflow: hidden;
		padding-bottom: 40rpx;
		
		&::-webkit-scrollbar {
			display: none;
			/* Chrome Safari */
		}
		// 头部
		.index_nav {
			position: relative;
			margin-bottom: 0;
			padding-bottom: 0;
			height: 492rpx;
			overflow: hidden;
			.index_nav_banner {
				position: absolute;
				top: 0;
				width: 100%;
				height: 672rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.nav_head {
				height: 76rpx;
				box-sizing: border-box;
				padding: 0 32rpx;
				display: flex;
				margin-bottom: 0;
				padding-bottom: 0;
				align-items: center;
				.header_back {
					position: relative;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.head_text {
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.6);
					font-weight: bold;
				}
				.head_right {
					margin-left: auto;
					display: flex;
					image {
						width: 100%;
						height: 100%;
					}
					.head_right_search {
						width: 68rpx;
						height: 68rpx;
						position: relative;
					}
					.head_right_more {
						width: 68rpx;
						height: 68rpx;
						position: relative;
						margin-left: 20rpx;
					}
				}
			}
			.nav_shop {
				position: relative;
				width: 686rpx;
				height: 384rpx;
				margin: 0 auto;
				margin-top: 285rpx;
				padding-top: 14rpx;
				.nav_shop_image {
					width: 686rpx;
					height: 304rpx;
					position: absolute;
					top: 0;
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.nav_shop_title {
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 52rpx;
					text-align: center;
					position: relative;
					z-index: 2;
					font-style: normal;
					text-transform: none;
					margin-bottom: 12rpx;
				}
				
				.nav_shop_body {
					width: 650rpx;
					height: 172rpx;
					position: relative;
					z-index: 2;
					background: #FFE8E7;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					margin: 0 auto;
				}
			}
			
		}
		.index_nav_fxed {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 100;
		}
		
		.rank_body {
			position: relative;
			z-index: 3;
			.body_top {
				position: relative;
				.body_Ttext {
					position: absolute;
					margin-left: 32rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #5A8EF4;
					line-height: 28rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					top: 30rpx;
				}
				.top_list {
					display: flex;
					align-items: flex-end;
					position: relative;
					margin-left: 24rpx;
					margin-right: 24rpx;
					z-index: 3;
					margin-top: -260rpx;
					.list_item{
						width: 230rpx;
						// margin-top: -136rpx;
						position: relative;
						height: 316rpx;
						.item_image {
							width: 230rpx;
							height: 316rpx;
							position: absolute;
							left: 0;
							bottom: 0;
							image {
								width: 100%;
								height: 100%;
							}
						}
						.item_title {
							font-weight: 500;
							font-size: 28rpx;
							color: #3E5A92;
							line-height: 38rpx;
							text-align: center;
							font-style: normal;
							position: relative;
							z-index: 3;
							text-transform: none;
							margin-top: 176rpx;
						}
						.item_orde {
							font-weight: 500;
							font-size: 24rpx;
							color: #3E5A92;
							line-height: 38rpx;
							text-align: center;
							font-style: normal;
							position: relative;
							z-index: 3;
							text-transform: none;
							margin-top: 2rpx;
						}
						
						.item_Number {
							font-weight: 500;
							font-size: 36rpx;
							color: #3E5A92;
							line-height: 38rpx;
							text-align: center;
							font-style: normal;
							position: relative;
							z-index: 3;
							text-transform: none;
							margin-top: 2rpx;
						}
						
						&:nth-child(2) {
							// margin-top: -436rpx;
							height: 388rpx;
							.item_image  {
								width: 230rpx;
								height: 388rpx;
							}
							
							.item_title {
								color: #FC7C34;
								margin-top: 210rpx;
							}
							
							.item_orde {
								color: #FC7C34;
							}
							
							.item_Number {
								color: #FC7C34;
							}
						}
						
						&:nth-child(3) {
							.item_image  {
								width: 230rpx;
								height: 316rpx;
							}
							
							.item_title {
								color: #9C3F0B;
							}
							
							.item_orde {
								color: #9C3F0B;
							}
							
							.item_Number {
								color: #9C3F0B;
							}
						}
					}
				}
			}
			.body_list {
				margin-top: 12rpx;
				.list_text {
					font-weight: 800;
					font-size: 32rpx;
					color: #22150B;
					line-height: 38rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-left: 34rpx;
				}
				
				.list_rank {
					width: 686rpx;
				
					background: #FFFFFF;
					margin: 0 auto;
					margin-top: 12rpx;
				
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					.rank_top {
						display: flex;
						align-items: center;
						.top_name {
							font-weight: bold;
							font-size: 24rpx;
							color: #858585;
							line-height: 28rpx;
							font-style: normal;
							text-transform: none;
							padding: 24rpx 32rpx;
							&:nth-child(1) {
								width: 15%;
							}
							&:nth-child(2) {
								width: 55%;
							}
							&:nth-child(3) {
								margin-left: auto;
								min-width: 21%;
							}
						}
					}
					.rankbody {
						height: 702rpx;
						overflow-y: scroll;
						.rank_bodys {
							display: flex;
							align-items: center;
							width: 686rpx;
							height: 100rpx;
							background: #FEFCFA;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							&:nth-child(2) {
								background: #FFF;
							}
							> view {
								text-align: center;
								&:nth-child(1) {
									width: 15%;
								}
								&:nth-child(2) {
									width: 55%;
								}
								&:nth-child(3) {
									margin-left: auto;
									margin-right: 32rpx;
								}
							}
							
							.bodys_solt{
								font-weight: bold;
								font-size: 28rpx;
								color: #000000;
								font-style: normal;
								text-transform: none;
								> view {
									line-height: 44rpx;
								}
								.icon_1 {
									margin-left: 32rpx;
									width: 44rpx;
									height: 44rpx;
									background: url(~@/static/index/icon_1.png) no-repeat;
									background-size: 100%;
								}
								.icon_2 {
									margin-left: 32rpx;
									width: 40rpx;
									height: 44rpx;
									background: url(~@/static/index/icon_3.png) no-repeat;
									background-size: 100%;
								}
								.icon_3 {
									margin-left: 32rpx;
									width: 40rpx;
									height: 44rpx;
									background: url(~@/static/index/icon_2.png) no-repeat;
									background-size: 100%;
								}
							}
							
							.bodys_title{
								display: flex;
								align-items: center;
								font-weight: 500;
								font-size: 24rpx;
								color: #22150B;
								line-height: 28rpx;
								font-style: normal;
								text-transform: none;
								.title_image {
									width: 68rpx;
									height: 68rpx;
									border-radius: 34rpx 34rpx 34rpx 34rpx;
									overflow: hidden;
									margin-right: 20rpx;
									image {
										width: 100%;
										height: 100%;
									}
								}
							}
							
							.bodys_orde {
								font-weight: 500;
								font-size: 24rpx;
								color: #B0B0B0;
								line-height: 28rpx;
								text-transform: none;
								font-style: normal;
								display: flex;
								align-items: center;
								justify-content: right;
								.orde_image {
									width: 32rpx;
									height: 32rpx;
									margin-left: 8rpx;
									image {
										width: 100%;
										height: 100%;
									}
								}
							}
						}
					}
				
				}
			}
		}
	}
</style>